<template>
	<view class="body">
		<!-- <u-navbar title="确认订单" bgColor="#07c160" :placeholder="true" :border="false" leftIcon=" "
			:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"></u-navbar> -->
		<view class="list">
			<!-- 数据为空 -->
			<u-empty style="padding:100upx 0;" v-if="itemObj.sendLockItemInfoList.length<=0"></u-empty>
			<view class="list_box">
				<!-- <view class="label">{{item.lockPlateNum}}手牌</view> -->
				<view class="list_sm" v-for="(items,indexs) in itemObj.sendLockItemInfoList" :key="indexs">
					<image :src="items.itemImage ? items.itemImage :'../../static/images/anmo.png'" class="shop_img">
					</image>
					<view class="list_right" style="display: flex;justify-content: space-between;align-items: center;">
						<view>
							<view class="list_tit">{{items.typeName}}</view>
							<view class="list_text">时长：{{items.timeLength}}分钟</view>
							<view class="list_text">
								数量：
								<span style="color: red;">{{items.num}}</span>
								单价：
								<span style="color: red;">￥{{items.money}}</span>
							</view>
						</view>
						<view class="list_tit">
							<span style="color: red;">￥{{ items.num * items.money }}</span>
						</view>
						<!-- <u-number-box v-model="items.num" @change="(event)=>changeCardNum(event,index, indexs)"
									:min="0" :max="100" style="justify-content: center;"></u-number-box> -->
					</view>
				</view>
			</view>
		</view>
		<view class="allMoney">
			总计：<span style="color: red;">￥{{moneyAll}}</span>
		</view>
		<view class="btns">
			<view class="btn" @click="submit">立即下单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				search: {
					customerId: '',
					itemDTOList: []
				}
			}
		},
		onLoad(val) {
			this.itemObj = JSON.parse(val.cartList)
			console.log(this.itemObj, 'itemList');
		},
		computed: {
			moneyAll() {
				const a = this.itemObj.sendLockItemInfoList.reduce((prev, curr) => +prev + (curr.num * curr.money), 0)
				return a
			}
		},
		methods: {
			submit() {
				this.search.itemDTOList = this.itemObj.sendLockItemInfoList.map(item => {
					return {
						itemClassId: item.itemClassId,
						itemId: item.itemId,
						itemPrice: item.money,
						itemTypeId: item.itemTypeId,
						number: item.num,
						itemMemberPrice: item.memberPrice,
						itemName:item.typeName,
						itemDuration:item.timeLength,
					}
				})
				this.search.customerId = uni.getStorageSync('customerId')
				this.$post(this.$api.customerOpenOrder, this.search,
					(res) => {
						console.log(res);
						if (res.code === 200) {
							uni.reLaunch({
								url: '/pages/order/placeOrderSuccess?orderId='+res.data
							})
						}
					}, (res) => {
						uni.hideLoading()
						uni.showToast({
							title: res.msg ? res.msg : '网络错误',
							icon: 'none'
						})
					}, 1, 0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		.btns {
			display: flex;
			justify-content: center;

			.btn {
				width: 90%;
				height: 90upx;
				line-height: 90upx;
				border-radius: 100upx;
				background-color: #07c160;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.list {
			width: 83%;
			padding: 30upx 30upx 10upx 30upx;
			margin: 30upx auto;
			background-color: #fff;
			border-radius: 10upx;
		}

		.allMoney {
			width: 91%;
			height: 100upx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 30upx auto;
			background-color: #fff;
			font-weight: 600;
			border-radius: 10upx;
		}

		.list_sm {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30upx;
		}

		.shop_img {
			width: 200upx;
			height: 200upx;
			object-fit: cover;
			border-radius: 10upx;
		}

		.list_right {
			width: 63%;
		}

		.list_tit {
			font-weight: 700;
			font-size: 28upx;
		}

		.list_text {
			color: #999;
			margin-top: 20upx;
			font-size: 26upx;
		}

		.list_ikd {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20upx;
		}
	}
</style>